<template>
    <div class="live-wrap">
        <cover-image class="cover" :src="cover" :size="coverSize">
            <div class="count">
                <span>{{ roomType }}</span>
                <span>{{ formatNumber(online) }}人气</span>
            </div>
            <div class="title">{{ title }}</div>
            <div class="status">{{ status }}</div>
        </cover-image>             
    </div>
</template>

<script>
import { reactive, computed, toRefs } from 'vue'
import CoverImage from '@/components/CoverImage'
import { formatNumber } from '@/utils'
export default {
    name: 'PostLive',
    components: {
        CoverImage
    },
    props: {
        // 直播间id
        roomid: {
            type: Number
        },
        // 直播类型
        roomType: {
            type: String
        },
        // 直播类型id
        roomTypeId: {
            type: Number
        },
        // 人气
        online: {
            type: Number
        },
        // 直播状态
        liveStatus: {
            type: Number
        },
        // 直播时间
        liveTime: {
            type: String
        },
        // 标题
        title: {
            type: String
        },
        // 封面图
        cover: {
            type: String
        },
        coverSize: {
            type: String,
            default: '@702w_394h'
        }
    },
    setup(props) {
        const params = reactive({
            status: computed(() => {
                return props.liveStatus > 0 ? (props.liveStatus === 2 ? '轮播中' : '直播中') : '直播结束'
            })
        })
        return {
            ...toRefs(params),
            formatNumber
        }
    }
}
</script>

<style lang="scss" scoped>
.live-wrap {
    padding: {
        left: 10px;
        right: 10px;
    }
    margin-bottom: 10px;
    .cover {
        padding-bottom: 394/702*100%;
    }
    .count {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: 56px;
        padding: {
          left: 10px;
          bottom: 10px;
        }
        box-sizing: border-box;
        font-size: 12px;
        color: $color-white;
        background-image: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 100%);
        span{
            margin-right: 10px;
        }
    }
    .title{
        position: absolute;
        left: 10px;
        top: 10px;
        width: 254px;
        color: $color-white;
        font-size: 14px;
        @include max-lines(2);
    }
    .status{
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 0 6px;
        color: $color-white;
        font-size: 12px;
        background-color: rgba(0,0,0,0.5);
    }
}
</style>